<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../css/global.css">
		<script src="../../js/getURLParam.js"></script>
		<style>
			html,
			body{
				background-color: #fff;	
			}
			.mui-content {
				background-color: #fff;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav headerstyle">
			<a class="mui-action-back astyle"><img src="../../images/drawable-hdpi/head_back.png"/></a>
			<h1 class="mui-title">Duty Cycle</h1>
		</header>
		<div class="mui-content" style="padding-top: 45px;">
			<div class="mui-content-padded" id="date">
				<h5 class="mui-content-padded">请选择日期</h5>
				<!--<input type="text" style="width: 45%;" id="beginDateArea" disabled="true;" />
				<p style="display: inline;">至</p>-->
				<!--<input type="text" style="width: 45%;" id="endDateArea" disabled="true;" />
				<button id='beginDate' style="width: 45%;" data-options='{"type":"date","beginYear":2014,"endYear":2099}' class="btn mui-btn">开始日期</button>
				<p style="display: inline;">至</p>-->
				<button id='beginDate' style="width: 31%;" data-options='{"type":"date","beginYear":2014,"endYear":2099}' class="btn mui-btn">开始日期</button>
				<button id='endDate' style="width: 31%;" data-options='{"type":"date","beginYear":2014,"endYear":2099}' class="btn mui-btn">结束日期</button>
				<button id="login" style="width: 20%;" class="mui-btn mui-btn-primary" onclick="getDutyCycle()">查询</button>
			</div>
			<div id="loading" style="text-align: center;display: none;">正在加载...</div>
			<div id="pad" style="height: 80px;display: none;"></div>
			<!--<div class="mui-content-padded" style="width: 100%;height: 200px;background-color: gray;text-align: center;line-height: 200px;">
				DutyCycle图表
			</div>-->
			<div style="width: 100%;text-align: center;">
			<div id="chartContainer" style="margin: 0 auto;">
			<div class="tal_list_title prompt" id="prompt" style="display:none;width: 100%;font-size:40px;"><br /><br /><br /><span id="DCFZMsg"></span></div>
			<div class="img" id="img" style="display:none;">
				 <table id="tiptable" cellpadding="0" cellspacing="4" align="center" height="40px" width="100%" style="border-top:0;border-bottom:0">
					<tr align="left">
						<td colspan="2" style="font-size:20px;height: 40px;">
							<span id="tip"></span>
						</td>
					</tr>
				</table> 
				<img id="image" width="100%" height="50%"/>
				 <table  align="center" width="100%">
					<tr>
						<td colspan="2" style="height: 40px;" >
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="daiId"></div>
							<div style="float:left;overflow:hidden;font-size:14px;">:怠速&nbsp;&nbsp;&nbsp;&nbsp;</div>
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="fiveId"></div>
							<div style="float:left;overflow:hidden;font-size:14px;">:50%运行区域</div><br />
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="sevenSeId"></div>
							<div style="float:left;height:15px;font-size:14px;">+</div>
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="sevenId"></div>
							<div style="float:left;height:15px;font-size:14px;">:70%运行区域</div><br/>
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="nineFiId"></div>
							<div style="float:left;height:15px;font-size:14px;">+</div>
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="nineSeId"></div>
							<div style="float:left;height:15px;font-size:14px;">+</div>
							<div style="float:left;width:40px;height:15px;font-size:14px;" id="nineThId"></div>
							<div style="float:left;overflow:hidden;font-size:14px;">:90%运行区域</div>
						</td>
					</tr>
				</table> 
		</div>
	</div>
				  
			</div>
			<div> <!--#include virtual="/pages/common/header.jsp"--> 
                 </div>
			<div class="mui-content-padded" style="text-align: center;width: 100%;position: fixed;bottom: 40px;">
				<button id="horizon" style="width: 48%;" class="mui-btn mui-btn-primary" onclick="gohorizontal()">横屏显示更清晰</button>
				<button id="back" style="width: 48%;display: none;" class="mui-btn mui-btn-primary" onclick="goback()">返回</button>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script>
		mui.init();
			var sessionid=GetQueryString("sessionid");
			var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var vclId = GetQueryString("vclid");
	        var fromtype=GetQueryString("fromtype");//ios请求
	  		var isandroid=GetQueryString("isandroid");//Android请求
	        var nowdate = new Date();
	        nowdate.setFullYear(nowdate.getFullYear()-1);
	        var nowyear = nowdate.getFullYear();
	        document.getElementById("beginDate").setAttribute("data-options",'{"type":"date","beginYear":'+nowyear+',"endYear":2099}');
			document.getElementById("endDate").setAttribute("data-options",'{"type":"date","beginYear":'+nowyear+',"endYear":2099}');	        
			(function($) {
				$.init();
				var result = $('#result')[0];
				beginDate.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					/*
					 * 首次显示时实例化组件
					 * 示例为了简洁，将 options 放在了按钮的 dom 上
					 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
					 */
					var picker = new $.DtPicker(options);
					picker.show(function(rs) {
						document.getElementById("beginDate").innerHTML = rs.text;
						picker.dispose();
					});
				}, false);
				endDate.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					var picker = new $.DtPicker(options);
					picker.show(function(rs) {
						document.getElementById("endDate").innerHTML = rs.text;
						picker.dispose();
					});
				}, false);
				var myDate = new Date(new Date().getTime() - 24 * 3600 * 1000).toISOString().substring(0,10);
				document.getElementById("endDate").innerHTML = myDate;
				var timestamp = new Date().getTime();
				var sevenDayBefore = new Date(timestamp - 7 * 24 * 3600 * 1000).toISOString().substring(0,10);
				document.getElementById("beginDate").innerHTML = sevenDayBefore;
			})(mui);
			function getDutyCycle(){
				var begdate=document.getElementById("beginDate").innerHTML.replace("年","-").replace("月","-").replace("日","");
				var enddate=document.getElementById("endDate").innerHTML.replace("年","-").replace("月","-").replace("日","");
				var bd = new Date(begdate);
				var ed = new Date(enddate);
				if(bd>ed){
					//document.getElementById("dd").innerHTML=bd.getFullYear();
					mui.toast("开始日期不能大于结束日期!")
				}else{
					//document.getElementById("dd").innerHTML=enddate;
					/*document.getElementById("dutycycle").src="../../../appFusionCharts/dcfz.jsp?proVersion='"+proversion+"'&accountId='"+accountid+"'&sessionid='"+sessionid+"'&bgntime='"+begdate+"'&endtime='"+enddate+"'&vclId='"+vclId+"'";*/
					document.getElementById("loading").style.display="";
					mui.ajax('../../../APPIOS/dcfz',{
						data:{"proVersion":proversion,"vclId":vclId,"bgntime":begdate,"endtime":enddate,"AppspLan":"","sessionid":sessionid,"accountId":accountid} ,
						dataType:'jsonp',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						success:function(data){
							var json = window.JSON.parse(data);
								if(json.hasDatas==3){
									document.getElementById("DCFZMsg").innerHTML='设备不支持此功能！';
									document.getElementById("prompt").show();
								}else if(json.hasDatas==1){//未配置
									document.getElementById("DCFZMsg").get(0).innerHTML='未配置';
									document.getElementById("prompt").show();
								}else if(json.hasDatas==2){
									if(json.error!=''&&json.error!=null){
									document.getElementById("tip").innerHTML=json.error;
									}else{
										if(json.isSearch==1){
											document.getElementById("tiptable").style.display="";
											document.getElementById("DCFZMsg").html('无符合条件的数据');
											document.getElementById("prompt").show();
											return;
										}
										document.getElementById("tiptable").style.display="none";
										var horizontal = "0";
										var picData = json.picData.replace(/%/g,'sn');
										document.getElementById("image").src="../../../APPIOS/outImg?picData="+picData+"&prompt="+json.Prompt;
										if(horizontal=="1"){
											document.getElementById("image").setAttribute("style","-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);transform: rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);");
										}
										document.getElementById("daiId").style.background=json.daiCor;
										document.getElementById("fiveId").style.background=json.fiveCor;
										document.getElementById("sevenId").style.background=json.sevenCor;
										document.getElementById("sevenSeId").style.background=json.fiveCor;
										document.getElementById("nineFiId").style.background=json.fiveCor;
										document.getElementById("nineSeId").style.background=json.sevenCor;
										document.getElementById("nineThId").style.background=json.nineCor;
										document.getElementById("loading").style.display="none";
										document.getElementById("img").style.display="";
									}
								}
							
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							//f.innerHTML="error";
						}
					});
				}
			}
			function gohorizontal(){
				var begdate=document.getElementById("beginDate").innerHTML.replace("年","-").replace("月","-").replace("日","");
				var enddate=document.getElementById("endDate").innerHTML.replace("年","-").replace("月","-").replace("日","");
				var bd = new Date(begdate);
				var ed = new Date(enddate);
				if(document.getElementById("img").style.display=="none"){
					mui.toast("请先查询数据");
					return;
				}
				if(bd>ed){
					//document.getElementById("dd").innerHTML=bd.getFullYear();
					mui.toast("开始日期不能大于结束日期!")
				}else{
					document.getElementById("date").style.display="none";
					document.getElementById("horizon").style.display="none";
					document.getElementById("back").style.display="";
					document.getElementById("pad").style.display="";
					document.getElementById("img").setAttribute("style","-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);transform: rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);");
					//document.getElementById("dd").innerHTML=enddate;
					/*window.location.href="dutycyclehorizontal.html?proversion='"+proversion+"'&accountid='"+accountid+"'&sessionid='"+sessionid+"'&bgntime='"+begdate+"'&endtime='"+enddate+"'&vclId='"+vclId+"'";*/
					
				}
				
			}
			/*function gohistoryflt(){
				window.location.href="historyflt.html?sessionid="+sessionid+"&accountid="+accountid+"&proversion="+proversion+"&vclid="+vclId+"&isandroid="+isandroid+"&fromtype="+fromtype;;
			}
       		 function govclflt(){
        		window.location.href="fault.html?sessionid="+sessionid+"&accountid="+accountid+"&proversion="+proversion+"&vclid="+vclId+"&isandroid="+isandroid+"&fromtype="+fromtype;;
        	}*/
       		 function gotoback(){
       		 	if(fromtype!=undefined && fromtype=="1"){
       				window.webkit.messageHandlers.goduty.postMessage(vclId); 		
       		 	}
       		 	if(isandroid!=undefined && isandroid=="1"){
       		 		window.dutycycle.dutycycle30(vclId);
       		 	}
        	
        	}
        	function goback(){
        		document.getElementById("date").style.display="";
					document.getElementById("horizon").style.display="";
					document.getElementById("back").style.display="none";
					document.getElementById("pad").style.display="none";
					document.getElementById("img").setAttribute("style","");
        	}
		</script>
	</body>

</html>